<template>
  <!-- template里头是放html的 -->
  <div class="aaawrap">
    <div v-if="arr.length">
      <Swiper1 :arr1="arr"></Swiper1>
    </div>
    <div v-else>暂无数据</div>

    <Son @movie-click="fn" name="zhangsabn" age="lisi"></Son>
    <Girl>
      <div>
          我是插槽的内容
      </div>
     
    </Girl>
  </div>
</template>

<script>
// 父组件给子组件传递数据
// 1.父组件自定义一个属性=一个想传递得参数
// 子组件接收父组件的数据使用props这个关键字，简单版本是一个数组
//3.父组件给子组件传递什么，子组件就接收什么参数
// 组件注册需要三步
// 1.引入
// 2.注册
// 3.以标签得形式展示
import Girl from "./views/girl.vue"
import axios from "axios";
import Swiper1 from "./components/swiper.vue";
import Son from "./views/son.vue";
// 放js的
export default {
  data() {
    return {
      msg: "我是父组件得值",
      arr: [],
    };
  },
  components: {
    // 组件注册
    Swiper1,
    Son,
    Girl
  },
  mounted() {
    // 页面一加载就想做一些事情要在生命周期里进行啊，生周期是页面一加载自动执行得函数，不需要手动调用
    axios.get("/list").then((res) => {
      console.log(res);
      this.arr = res.data;
      console.log(this.arr);
    });
  },
  methods: {
    fn(data) {
        console.log(data);
    },
  },
};
</script>

<style>
/* 放养式的 */
html,
body {
  width: 100%;
  height: 100%;
}
.aaawrap {
  width: 100%;
  height: 100%;
}
</style>